<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
	<script type="text/javascript" src="waypoints.min.js"></script>
    <script>
        var i = 0;
    
        $(document).bind("ready", function(){
			
            //console.log($('#footerel'));
            
            /*$('#header').waypoint(function (a, b) {
            
            	console.log("header", a, b);
            });*/
            
            for(; i<20; i++)
            {
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i + "</h3><p>z</p></a></li>"));
            }
            
            $("#list").listview('refresh');
            
            $('#footer').waypoint(function (a, b) {
                
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i++ + "</h3><p>z</p></a></li>"));
                $("#list").listview('refresh');
                $('#footer').waypoint({ offset: '100%'});
            }, { offset: '100%'});
            
        });
    </script>
    
</head> 
<body> 

<div data-role="page">
    <div id="header" data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div class="content-primary">    
            <ul data-role="listview" id="list">
            </ul>
        </div>
    </div><!-- /content -->
    
    <div id="footer" data-role="footer">
        <h1>My Footer</h1>
    </div><!-- /header -->

</div><!-- /page -->

</body>
</html>